<template>
  <div ref="map" class="map"></div>
</template>
<style>
.esri-compass {
  position: absolute;
  top: 175px !important;
}
</style>

<script>
import mapconfig from '@/config/config_map.js'

import jsapiUtil from '@/utils/jsapi'
import * as esriloader from 'esri-loader'

import pointsParameters from '@/config/testData.js'
import clientLayersOperate from '@/utils/clientLayersOperate.js'

export default {
  name: 'MyMap',
  props: {
    msg: String,
  },
  async mounted() {
    esriloader.loadCss(mapconfig.cssUrl) //添加样式

    const [
      Map,
      Basemap,
      SceneView,
      SpatialReference,
      IdentityManager,
      Camera,
      LayerList,
      Expand,
      Fullscreen,
      Legend,
      GroupLayer,
      TileLayer,
      SceneLayer,
      FeatureLayer,
      DirectLineMeasurement3D,
      AreaMeasurement3D,
      Graphic,
      watchUtils,
    ] = await jsapiUtil.load([
      'esri/Map',
      'esri/Basemap',
      'esri/views/SceneView',
      'esri/geometry/SpatialReference',
      'esri/identity/IdentityManager',
      'esri/Camera',
      'esri/widgets/LayerList',
      'esri/widgets/Expand',
      'esri/widgets/Fullscreen',
      'esri/widgets/Legend',
      'esri/layers/GroupLayer',
      'esri/layers/TileLayer',
      'esri/layers/SceneLayer',
      'esri/layers/FeatureLayer',
      'esri/widgets/DirectLineMeasurement3D',
      'esri/widgets/AreaMeasurement3D',
      'esri/Graphic',
      'esri/core/watchUtils',
    ])
    var xmlhttp = new XMLHttpRequest()
    
    // username  和 password 换成 自己的用户名和密码
    xmlhttp.open(
      'GET',
      'http://10.89.5.191/onemap/tokens/generateToken?username=xxxx&password=xxx&expiration=5000&f=json',
      false
    )
    xmlhttp.send()
    var token = JSON.parse(xmlhttp.responseText).token

    IdentityManager.registerToken({
      server: 'http://10.89.5.191/OneMapServer/rest/services',
      token: token,
    })

    const air2020Layer = await new TileLayer(
      'http://10.89.5.191/OneMapServer/rest/services/cn_image/MapServer',
      {
        id: 'air2020Basemap',
        visible: true,
        opacity: 1,
        title: '航空影像'
      }
    )

    const baseLayer = await new TileLayer(
      'http://10.89.5.191/OneMapServer/rest/services/zwdt_base/MapServer',
      {
        id: 'zhengwuBasemap',
        visible: true,
        opacity: 1,
        title: '政务底图',
      }
    )

    window.map = new Map({
      ground: {
        surfaceColor: '#ffffff',
      },
    })

    const initCamera = {
      heading: 0,
      tilt: 0.49999999999913347,
      fov: 55,
      position: {
        x: -7617.664516359413,
        y: -2249.516449713733,
        z: 25478.51332795852,
        spatialReference: SpatialReference.WebMercator,
      },
    }

    window.sceneView = new SceneView({
      container: this.$refs.map,
      viewingMode: 'local',
      map: map,
      camera: initCamera,
      popup: {
        defaultPopupTemplateEnabled: true,
      },
    })

    var fullScreen = new Fullscreen({
      view: window.sceneView,
    })

    var layerList = new LayerList({
      view: window.sceneView,
    })

    var layerListExpand = new Expand({
      expandTooltip: '图层控制',
      view: window.sceneView,
      content: layerList,
    })

    var directLineMeasurement3DExpand = new Expand({
      expandIconClass: 'esri-icon-minus',
      view: window.sceneView,
      expandTooltip: '测距',
    })

    var areaMeasurement3DExpand = new Expand({
      expandIconClass: 'esri-icon-polygon',
      view: window.sceneView,
      expandTooltip: '测面积',
    })

    var directLineMeasurement3D, areaMeasurement3D
    directLineMeasurement3DExpand.watch('expanded', function(expanded) {
      if (expanded) {
        layerListExpand.collapse()
        areaMeasurement3DExpand.collapse()
        directLineMeasurement3D = new DirectLineMeasurement3D({
          view: window.sceneView,
        })
        directLineMeasurement3D.viewModel.newMeasurement()
        directLineMeasurement3DExpand.content = directLineMeasurement3D
      } else {
        directLineMeasurement3D.viewModel.clearMeasurement()
      }
    })

    areaMeasurement3DExpand.watch('expanded', function(expanded) {
      if (expanded) {
        layerListExpand.collapse()
        directLineMeasurement3DExpand.collapse()
        areaMeasurement3D = new AreaMeasurement3D({
          view: window.sceneView,
        })
        areaMeasurement3D.viewModel.newMeasurement()
        areaMeasurement3DExpand.content = areaMeasurement3D
      } else {
        areaMeasurement3D.viewModel.clearMeasurement()
      }
    })

    var legend = new Legend({
      view: window.sceneView,
    })

    var legendExpand = new Expand({
      expandTooltip: '显示图例',
      expanded: false,
      view: window.sceneView,
      content: legend,
    })

    window.sceneView.ui.add(legendExpand, 'bottom-left')
    window.sceneView.ui.add(
      [
        layerListExpand,
        directLineMeasurement3DExpand,
        areaMeasurement3DExpand,
        fullScreen,
      ],
      'top-left'
    )
    window.sceneView.ui.remove([
      'zoom',
      'navigation-toggle',
      'attribution',
      // 'compass',
    ])

    const baseMapGroupLayer = new GroupLayer({
      title: '基础底图',
      visible: true,
      visibilityMode: 'exclusive',
      layers: [air2020Layer, baseLayer],
      opacity: 1,
    })
    map.layers.add(baseMapGroupLayer)

    var cityBuildingLayer = new SceneLayer({
      url:
        'http://10.89.5.191/OneMapServer/rest/services/Hosted_baimo_jiedao/SceneServer',
      title: '长宁白模',
      visible: false,
      elevationInfo: {
        mode: 'absolute-height',
        offset: 0.05,
      },
      renderer: {
        authoringInfo: {
          visualVariables: [
            {
              field: 'HEIGHT',
              maxSliderValue: 200,
              minSliderValue: 1,
              theme: 'high-to-low',
              type: 'color',
            },
          ],
        },
        type: 'class-breaks',
        visualVariables: [
          {
            type: 'color',
            field: 'HEIGHT',
            stops: [
              {
                value: '',
                color: [20, 96, 166, 0.7],
                label: '暂缺',
              },
              {
                value: 1,
                color: [20, 96, 166, 0.7],
                label: '< 1',
              },
              {
                value: 40,
                color: [55, 135, 192, 0.7],
              },
              {
                value: 80,
                color: [148, 195, 223, 0.7],
                label: '80',
              },
              {
                value: 120,
                color: [230, 238, 251, 0.7],
              },
              {
                value: 160,
                color: [235, 240, 249, 0.7],
                label: '> 160',
              },
            ],
          },
        ],
        classBreakInfos: [
          {
            maxValue: 1.7976931348623157e308,
            symbol: {
              type: 'mesh-3d',
              symbolLayers: [
                {
                  material: {
                    color: [170, 170, 170],
                    colorMixMode: 'replace',
                  },
                  type: 'fill',
                  edges: {
                    type: 'solid',
                    color: [0, 0, 0],
                    transparency: 60,
                    size: 0.5,
                  },
                },
              ],
            },
            minValue: -1.7976931348623157e308,
          },
        ],
        field: 'HEIGHT',
      },
    })

    const modelGroupLayer = new GroupLayer({
      title: '建筑模型',
      visible: true,
      visibilityMode: 'independent',
      layers: [cityBuildingLayer],
      opacity: 1,
    })
    map.layers.add(modelGroupLayer)

    //业务图层(静态)

    const changningquRegion = new FeatureLayer({
      title: '长宁区街道',
      url:
        'http://10.89.5.191/OneMapServer/rest/services/STREEt_testzyy/MapServer/0',
      elevationInfo: {
        mode: 'absolute-height',
        offset: 8,
      },
    })

  

    const regionGroupLayer = new GroupLayer({
      title: '边界图层',
      visible: true,
      visibilityMode: 'independent',
      layers: [changningquRegion],
      opacity: 1,
    })
    map.layers.add(regionGroupLayer)

  


    //业务图层(动态)  撒点
    // setTimeout(this.displayJSONData, 5000)
  },
  methods: {
    async displayJSONData() {
      await clientLayersOperate.displayJSONData(JSON.parse(pointsParameters))
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map {
  height: 100%;
  width: 100%;
}
</style>
